<template>
  <!-- 话题详情 -->
  <div class="musicDetails" :class="{ box_fixed: isFixed }">
    <!-- 数据更新时间 -->
    <div class="tdm_time main">
      <div class="tdm_data">数据更新时间</div>
      <div class="tdm_date">{{ changeTime }}</div>
      <img class="tdm_time_img" src="@/assets/one/refreshIcon.png" @click="Refresh" />
    </div>
    <!-- 话题基础信息 -->
    <div class="basicsbox main" :class="{ fixed: isFixed }" ref="headerBox">
      <div class="basics">
        <div>
          <img
            :src="musicInfo.thumPic != '' ? musicInfo.thumPic : imgurl"
            class="imgtit"
            @click="ImgPreview(musicInfo.thumPic != '' ? musicInfo.thumPic : imgurl)"
          />
        </div>
        <div>
          <h3>{{ musicInfo.title }}</h3>
          <p class="authors">作者: {{ musicInfo.nickname }}</p>
          <div class="numinfo">
            <p>{{ format_num(musicInfo.useCount) }}人参与</p>
            <p>{{ format_num(musicInfo.playCount) }}播放</p>
          </div>
        </div>
      </div>
      <!-- 添加 收藏 -->
      <div class="tdm_collect" v-if="musicInfo.isCollect == 0" @click="addStar(musicInfo)">
        <img src="@/assets/one/xingxing.png" alt />
        收藏
      </div>
      <div
        class="tdm_cancel_collect"
        v-if="musicInfo.isCollect == 1"
        @click="cancelStar(musicInfo)"
      >已收藏</div>
    </div>
    <!-- 分割线 -->
    <div class="line"></div>
    <!-- 基础分析 -->
    <div class="basebox" :class="{ fixed: isFixed }" ref="headerBoxFixed">
      <h3 class="news main">基础信息</h3>
    </div>
    <div class="main content">
      <div class="title">每日使用人数趋势图</div>
      <!-- 使用人数势图 -->
      <div class="hotbox">
        <KChart
          v-if="xData1.length != 0 && !Loading"
          :xData="xData1"
          :series1="yData1"
          title="使用人数"
          name1="使用人数"
        />
        <van-loading
          style="padding-top:1.5rem; box-sizing: border-box"
          class="loading"
          v-if="Loading"
          type="spinner"
          :vertical="true"
        />
        <div class="zanwu" v-if="!xData1.length && !Loading">
          <img src="@/assets/one/zw.png" />
          <p class="zw">暂无数据</p>
        </div>
      </div>
      <div class="title">使用人群行业分布</div>
      <!-- 人群行业分布 -->
      <div class="industry">
        <BigPie :valueData="pieData" v-if="pieData && pieData.length != 0" />
        <van-loading
          style="padding-top:1.5rem; box-sizing: border-box"
          class="loading"
          v-if="Loading1"
          type="spinner"
          :vertical="true"
        />
        <div class="zanwu" v-if="!pieData.length && !Loading1">
          <img src="@/assets/one/zw.png" />
          <p class="zw">暂无数据</p>
        </div>
      </div>
      <div class="title">播放量趋势图</div>
      <!-- 播放量趋势图 -->
      <div class="hotbox">
        <KChart
          v-if="xData1.length != 0 && !Loading"
          :xData="xData1"
          :series1="yData2"
          name1="播放量"
          title="播放量"
        />
        <van-loading
          style="padding-top:1.5rem; box-sizing: border-box"
          class="loading"
          v-if="Loading"
          type="spinner"
          :vertical="true"
        />
        <div class="zanwu" v-if="!xData1.length && !Loading">
          <img src="@/assets/one/zw.png" />
          <p class="zw">暂无数据</p>
        </div>
      </div>
      <div class="title">同款音乐视频</div>
      <!-- 搜索框 -->
      <div class="searchBox box">
        <input
          type="text"
          v-model.trim="keyword"
          placeholder="请输入视频名称或关键词搜索"
          @keyup.enter="toSearch"
        />
        <img src="@/assets/one/seach.png" v-if="!imgBox" @click="toSearch" />
        <img src="@/assets/two/search.png" v-if="imgBox" @click="toSearch" />
      </div>
      <!-- 日期筛选 -->
      <div class="f_date">
        <span :class="fDate == 7 ? 'active' : ''" @click="setDateFn(7)">近7天</span>
        <span :class="fDate == 30 ? 'active' : ''" @click="setDateFn(30)">近30天</span>
        <span :class="fDate == 90 ? 'active' : ''" @click="setDateFn(90)">近90天</span>
      </div>
      <!-- 同款话题 视频列表 -->
      <div v-if="MusicList && MusicList.length != 0">
        <div
          class="musicbox"
          v-for="(item, index) in MusicList"
          :key="index"
          @click="gotovideo(item.url)"
        >
          <div class="head">
            <div class="imgbox">
              <img :src="item.thumPic" class="thumpic" />
            </div>
            <div class="head_title">
              <h4>{{ item.title }}</h4>
              <p>发布时间: {{ timestamp(item.releaseTime, "Y-M-D h:m") }}</p>
            </div>
          </div>
          <div class="datanum">
            <div>
              <span>{{ format_num(item.favoriteCount) }}</span>点赞总数
            </div>
            <div>
              <span>{{ format_num(item.commentCount) }}</span>评论总数
            </div>
            <div>
              <span>{{ format_num(item.shareCount) }}</span>转发总数
            </div>
          </div>
        </div>
      </div>
      <div class="more" @click="addcount" v-if="MusicList.length && !loadinglist && !isOver">查看更多</div>
      <p class="bott" v-if="isOver && !loadinglist && MusicList.length">我是有底线的~</p>
      <div class="zanwu" v-if="!MusicList.length && !loadinglist">
        <img src="@/assets/one/zw.png" />
        <p class="zw">暂无数据</p>
      </div>
    </div>
  </div>
</template>
<script>
import { ImagePreview } from 'vant';
import KChart from '../talent/talentDetails/EComponents/KChart.vue';
import BigPie from '@/component/BigPie.vue';
import imgurl from '@/assets/img/no_topic.png';
export default {
  components: { KChart, BigPie },
  data() {
    return {
      isFixed: false,
      changeTime: '',
      musicInfo: [], // 基础信息
      active: 0,
      xData1: [], // 折线图x轴
      yData1: [], // 折线图y轴
      yData2: [], // 播放量y轴
      Loading: false,
      Loading1: false,
      pieData: [], //行业分布
      pageIndex: 1,
      pageSize: 1,
      MusicList: [], //同款音乐视频列表
      count: null,
      loadinglist: false,
      keyword: '',
      imgBox: false,
      loadinglist: false,
      isOver: false,
      tits: '',
      fDate: 7, //日期
      active: 0,
      imgurl: imgurl
    };
  },
  watch: {
    beforeDestroy() {
      window.removeEventListener('scroll', this.setHeaderFixed); //释放window的滑动事件
    },
    // 搜索
    keyword: function (newVal, oldVal) {
      if (newVal == '') {
        this.imgBox = false;
        this.MusicList = [];
        this.pageIndex = 1;
        this.isOver = false;
        this.getMusicList();
      } else {
        this.imgBox = true;
      }
    }
  },
  created() {
    this.getDetailsData().then(vipLevel => {
      if (vipLevel == 0) return;
      this.setDateFn(7);
    }); //音乐基础信息
    this.getTradeRatio(); //使用人数
    this.getTrend(); //行业分布
  },
  mounted() {
    window.onscroll = e => {
      this.setHeaderFixed();
    };
  },
  methods: {
    setHeaderFixed() {
      //设置顶部浮动方法
      let headerBoxEl = this.$refs.headerBox;
      if (!headerBoxEl) return;
      if (!this.isFristScroll) {
        let elTop = headerBoxEl.offsetTop;
        this.fixedVal = elTop;
        this.isFristScroll = true;
      }
      // let elHeight = headerBoxEl.offsetHeight;
      // let windowHeight = window.screen.height;
      // let documentHeight = document.body.offsetHeight || document.body.clientHeight;
      let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
      if (scrollTop >= this.fixedVal) {
        this.isFixed = true;
      } else {
        this.isFixed = false;
      }
    },
    // 刷新
    Refresh() {
      this.musicInfo = [];
      this.getDetailsData();
      this.pieData = [];
      this.getTrend(); //行业
      this.xData1 = [];
      this.getTradeRatio(); //使用人数
    },
    //   搜索
    toSearch() {
      this.MusicList = [];
      this.pageIndex = 1;
      this.loading = true;
      this.getMusicList();
    },
    // 失去焦点和得到焦点的验证方法，name为要验证的字段名,type为blur或focus
    animateWidth(name, type) {
      if (name == 'company_name') {
        if (type == 'blur') {
          this.imgBox = false;
        } else {
          this.imgBox = true;
        }
      }
    },
    setDateFn(dateNum) {
      //获取筛选区间日期
      let endDate = this.timestamp(Date.now() / 1000 - 1, 'Y-M-D');
      let startDate = this.timestamp(Date.now() / 1000 - 86400 * (dateNum - 1), 'Y-M-D');
      this.fDate = dateNum;
      this.fDateStr = startDate + '-' + endDate;
      this.MusicList = [];
      this.pageIndex = 1;
      this.getMusicList();
    },
    // 话题基本信息
    getDetailsData() {
      return new Promise((resolve, reject) => {
        this.$axios
          .get('/api/topic/GetTopicDetail?topicId=' + this.$route.query.id)
          .then(res => {
            if (res.data.code == 0) {
              this.musicInfo = res.data.data;
              let date = Math.round(new Date() / 1000); // 获取时间
              this.changeTime = this.timestamp(date, 'Y-M-D h:m:s'); // 获取时间
              this.tits = res.data.data.title;
              resolve(res.data.data.title);
            }
          })
          .catch(err => {
            console.log(err);
          });
      });
    },
    // 添加收藏
    addStar() {
      let that = this;
      this.$axios
        .post('api/collection/InsertCollection', {
          CollectId: this.$route.query.id,
          Module: 4
        })
        .then(res => {
          if (res.data.code == 0) {
            this.musicInfo.isCollect = 1;
            this.$toast.success('收藏成功');
          }else if(res.data.code == 1003){
            this.$toast('权限不足，请升级会员');
            this.$popVip({
              show: true,
              obj: that.$router,
              // minLeve: that.minLeve
            });
          }
        });
    },
    // 取消收藏
    cancelStar() {
      this.$axios
        .post('/api/collection/CancelCollection', {
          CollectId: this.$route.query.id,
          Module: 4 //模块 1达人 2视频 3音乐 4话题 5商品
        })
        .then(res => {
          if (res.data.code == 0) {
            this.$toast.success('已取消收藏');
            this.musicInfo.isCollect = 0;
          }
        })
        .catch(err => {
          console.log(err);
          this.$message({
            message: '取消收藏失败！',
            type: 'error',
            duration: 2000
            // offset: '400',
          });
        });
    },
    // 使用人数
    getTradeRatio() {
      this.Loading = true;
      this.$axios
        .get('/api/topic/GetTradeRatio', {
          params: {
            topicId: this.$route.query.id,
            chartType: 1 //1:使用人数（datas1） 播放量增量 (datas2) 2:行业分析
          }
        })
        .then(res => {
          if (res.data.code == 0) {
            this.yData1 = res.data.data.datas1; //使用人数
            if (res.data.data.dates != null) {
              res.data.data.dates.forEach(element => {
                this.xData1.push(this.timestamp(element, 'M/D'));
                return this.xData1;
              });
            }
            this.yData2 = res.data.data.datas2; //播放量增量
            this.Loading = false;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 使用人群行业分布
    getTrend() {
      this.Loading1 = true;
      this.$axios
        .get('/api/topic/GetTradeRatio', {
          params: {
            topicId: this.$route.query.id,
            chartType: 2 //1:使用人数（datas1） 播放量增量 (datas2) 2:行业分析
          }
        })
        .then(res => {
          if (res.data.code == 0) {
            this.pieData = res.data.data.slice(0, 10);
            this.Loading1 = false;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 同款话题列表详情
    getMusicList() {
      this.loadinglist = true;
      this.$axios
        .post('/api/topic/GetTopicAwemes1', {
          Topic: this.tits,
          title: this.trimStr(this.keyword),
          SortType: 2,
          ReleaseTime: this.fDateStr,
          Index: this.pageIndex,
          Size: 10
        })
        .then(res => {
          if (res.data.code == 0) {
            this.MusicList = this.MusicList.concat(res.data.data.data);
            this.count = res.data.data.count;
            this.loadinglist = false;
            console.log(this.count == this.MusicList.length);
            if (this.count == this.MusicList.length) {
              this.isOver = true;
            } else {
              this.isOver = false;
            }
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 查看更多
    addcount() {
      this.pageIndex = this.pageIndex + 1;
      this.getMusicList();
    },
    gotovideo(url) {
      location.href = url; // 跳转抖音视频页面
    },
    // 图片预览（放大）
    ImgPreview(imgurl) {
      ImagePreview({
        images: [imgurl],
        closeable: true
      });
    }
  }
};
</script>
<style lang="less" scoped>
.model_interval {
  padding-top: 0.01rem !important;
}
//   暂无数据
.zanwu {
  width: 5.3333rem;
  height: 4rem;
  margin: 1rem auto 0 auto;
  img {
    margin: 0 auto;
    width: 4rem;
    height: 3.2rem;
    display: block;
  }
  p {
    font-size: 0.3467rem;
    line-height: 0.4rem;
    color: #888;
    text-align: center;
  }
}
.musicDetails {
  overflow: hidden;
  &.box_fixed{
    padding-top: 2.9rem;
  }
  .main {
    width: 9.2rem;
    margin: 0 auto;
  }
  // 数据更新时间
  .tdm_time {
    margin: 0.4rem auto 0;
    width: 9.2rem;
    height: 0.88rem;
    line-height: 0.88rem;
    background-color: #f5f5f5;
    border-radius: 0.133333rem;
    border: solid 1px #e5e5e5;
    margin-bottom: 0.4rem;
    display: flex;
    position: relative;
    top: 0.106rem;
    .tdm_data {
      font-size: 0.346667rem;
      color: #888888;
      margin-left: 0.4rem;
      margin-right: 0.4rem;
    }
    .tdm_date {
      font-size: 0.373333rem;
      font-family: DINPro-Medium;
      color: #222222;
    }
    .tdm_time_img {
      position: absolute;
      left: 7.52rem;
      top: 0.24rem;
      width: 0.386667rem;
      height: 0.386667rem;
      // background-color: #1779ff;
    }
  }
  // 基础信息
  .basicsbox {
    position: relative;
    margin-bottom: 0.4rem;
    .basics {
      display: flex;
      > div:nth-of-type(1) {
        width: 1.86666rem;
        .imgtit {
          width: 1.6rem;
          height: 1.6rem;
          border-radius: 0.2666rem;
          object-fit: cover;
        }
      }
      div:nth-of-type(2) {
        margin-left: 0.1rem;
        h3 {
          font-size: 0.4rem;
          color: #222;
          font-weight: normal;
        }
        p {
          font-size: 0.346667rem;
          color: #888;
        }
        .numinfo {
          // width: 4.133rem;
          margin-top: 0.1rem;
          display: flex;
          p {
            display: inline-block;
            font-size: 0.29rem;
            color: #555;
            padding: 0.06rem 0.1444rem;
            margin-right: 0.266rem;
            background: #fff7ed;
            border-radius: 2px;
          }
        }
      }
    }
    // 吸顶样式
    &.fixed {
      position: fixed;
      top: 0;
      width: 10rem;
      margin-top: 0;
      padding: 0.4rem 0;
      z-index: 19;
      background: #fff;
      &:after {
        content: '';
        position: absolute;
        bottom: 0.18rem;
        left: 0;
        width: 100%;
        height: 0.18666rem;
        background-color: #f1f1f1;
      }
      .basics {
        width: 9.2rem;
        margin: 0 auto;
        padding-bottom: 0.22rem;
        position: relative;
        > div:nth-of-type(1) {
          width: 1.3333rem;
        }
        .imgtit {
          width: 1.0933rem !important;
          height: 1.0933rem !important;
          left: 0.0533rem !important;
        }
      }
      .tdm_collect,
      .authors,
      .line {
        display: none;
      }
    }
  }
  // 添加收藏
  .tdm_collect {
    position: absolute;
    right: 0;
    top: 0.293333rem;
    width: 1.866667rem;
    height: 0.8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.133333rem;
    background-color: #fd7f2c;
    font-size: 0.346667rem;
    color: #fff;
    img {
      width: 0.32rem;
      height: 0.32rem;
      margin-right: 0.053333rem;
    }
  }
  //  取消收藏（已收藏）
  .tdm_cancel_collect {
    position: absolute;
    right: 0;
    top: 0.293333rem;
    width: 1.866667rem;
    height: 0.8rem;
    line-height: 0.8rem;
    text-align: center;
    border-radius: 0.133333rem;
    border: solid 1px #fd7f2c;
    font-size: 0.346667rem;
    color: #fd7f2c;
  }
  // 分割线
  .line {
    width: 100%;
    height: 0.186667rem;
    background: #f1f1f1;
  }
  // 基础分析
  .basebox {
    .news {
      font-weight: normal;
      font-size: 0.4rem;
      color: #222;
      line-height: 1.12rem;
      position: relative;
    }
    .news::after {
      content: '';
      position: absolute;
      bottom: -1px;
      left: 0.1rem;
      width: 1.4rem;
      height: 0.08rem;
      border-radius: 2px;
      background: #fd7f2c;
    }
    border-bottom: 1px solid #e5e5e5;
    &.fixed {
      position: fixed;
      top: 1.9rem;
      width: 10rem;
      z-index: 19;
      background: #fff;
      .news {
        font-size: 0.373333rem !important;
        line-height: 1.0933rem;
      }
      .news::after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 0.16rem;
        width: 1rem;
        height: 0.06rem;
        border-radius: 2px;
        background: #fd7f2c;
      }
    }
  }
  .content {
    margin-top: 0.6666rem;
    .title {
      font-size: 0.4rem;
      color: #222;
      padding-left: 0.2666rem;
      position: relative;
    }
    .title::after {
      content: '';
      position: absolute;
      left: 0;
      top: 0.1rem;
      display: inline-block;
      width: 0.08rem;
      height: 0.3888rem;
      background-color: #fd7f2c;
      border-radius: 3px;
    }
    .hotbox {
      height: 5.18rem;
      margin-bottom: 0.66666rem;
    }
    .industry {
      height: 6rem;
    }
    /* 搜索框 */
    .searchBox {
      display: flex;
      align-items: center;
      box-sizing: border-box;
      border-radius: 0.1333rem;
      border: solid 1px #e5e5e5;
      width: 9.2rem;
      height: 0.986667rem;
      padding-left: 0.5rem;
      margin-top: 0.4rem;
      input[type='text'] {
        width: 86%;
        height: 100%;
        border: none;
        font-size: 0.3733rem;
        color: #222;
      }
      input {
        //处理ios兼容性(阴影)
        -webkit-appearance: none;
      }
      img {
        width: 0.4rem;
        height: 0.4rem;
        margin-left: 0.4rem;
      }
    }
    .f_date {
      font-size: 0;
      margin-top: 0.266667rem;
      span {
        display: inline-block;
        height: 0.613333rem;
        line-height: 0.613333rem;
        margin-right: 0.253333rem;
        padding: 0 0.133333rem;
        text-align: center;
        font-size: 0.32rem;
        color: #555555;
        background-color: #fff;
        border: 1px solid #e5e5e5;
        border-radius: 4px;
        box-sizing: border-box;
        &.active {
          color: #fff;
          background-color: #fd7f2c;
          border-color: #fd7f2c;
        }
      }
    }
    // 列表
    .musicbox {
      padding-bottom: 0.4rem;
      border-bottom: 1px solid #e5e5e5;
      .head {
        display: flex;
        padding-top: 0.4rem;
        .imgbox {
          position: relative;
          .thumpic {
            display: block;
            width: 1.333333rem;
            height: 1.3333rem;
            border-radius: 0.2666rem;
            object-fit: cover;
          }
        }
        .head_title {
          margin-left: 0.24rem;
          h4 {
            font-weight: normal;
            font-size: 0.4rem;
            color: #222;
            width: 7.386667rem;
            height: 0.4rem;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            padding-top: 0.14rem;
            padding-bottom: 0.14rem;
          }
          p {
            font-size: 0.32rem;
            color: #888;
          }
        }
      }
      // 数据
      .datanum {
        padding-top: 0.4rem;
        display: flex;
        justify-content: space-around;
        div {
          span {
            display: block;
            font-size: 0.4rem;
            color: #222;
          }
          font-size: 0.32rem;
          color: #888;
          text-align: center;
        }
      }
    }
    //   查看更多
    .more {
      margin: 0.6667rem auto;
      width: 2.1333rem;
      height: 0.8rem;
      line-height: 0.8rem;
      border-radius: 0.1333rem;
      border: solid 1px #fd7f2c;
      font-size: 0.3467rem;
      color: #fd7f2c;
      text-align: center;
    }
    .bott {
      //提示登录pc端
      font-size: 0.32rem;
      color: #b5b5b5;
      text-align: center;
      line-height: 1.0666rem;
    }
  }
}
</style>
